<template>
  <div class="left-slide__wrapper"
       :class="{navMenuState: navMenuState}"
       v-show = 'visible'>
    <div class='left-slide__mask' @click.self="handleWrapperClick">

    </div>
    <div class='slide-box' :style="{width: width}">
      <div class='slide-box__header'>
        <slot name="title">
          <span class="slide-box__title">{{ title }}</span>
        </slot>
        <div class='slide-box__close' v-if="showClose" @click="handleClose">
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </div>
      </div>
      <div class="slide-box__body" ref='leftSlide'>
        <slot></slot>
      </div>
      <div class="slide-box__footer" v-if="showFooter">
        <slot name="footer">
          <el-button class = 'slide-box__button' @click='cancelClick'>
            {{$t('public.cancel')}}
          </el-button>
          <el-button class = 'slide-box__button' type="primary" @click='saveClick'>
            {{$t('public.save')}}
          </el-button>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'leftSlide',
    data () {
      return {
        rendered: false
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      closeOnClickModal: {
        type: Boolean,
        default: false
      },
      visible: {
        type: Boolean,
        default: false
      },
      showClose: {
        type: Boolean,
        default: true
      },
      showFooter: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '360px'
      }
    },
    computed: {
      navMenuState () {
        return this.$store.state.navMenuState || false
      }
    },
    methods: {
      handleWrapperClick () {
        if (!this.closeOnClickModal) return
        this.handleClose()
      },
      handleClose () {
        if (typeof this.beforeClose === 'function') {
          this.beforeClose(this.hide)
        } else {
          this.hide()
        }
      },
      hide () {
        this.$emit('close')
      },
      cancelClick () {
        this.$emit('close')
      },
      saveClick () {
        this.$emit('save')
      }
    },
    mounted () {
      if (this.visible) {
        this.rendered = true
      }
    },
    watch: {
      visible (val) {
        if (val) {
          this.$emit('open')
          this.$nextTick(() => {
            this.$refs.leftSlide.scrollTop = 0
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .left-slide__wrapper.navMenuState
    width calc(100% - 120px)
  .left-slide__wrapper
    width calc(100% - 53px)
    position fixed
    height calc(100% - 53px)
    right 0
    z-index 4
    bottom 0
  .left-slide__mask
    position absolute
    right 0
    left 0
    top 0
    bottom 0
    z-index 2
    background-color #000
    /*filter Alpha(Opacity=60)*/
    opacity 0.5
  .slide-box
    position absolute
    right 0px
    top 0
    width 360px
    height 100%
    background white
    z-index 3
    display flex
    flex-direction column
    justify-content space-between
    animation move-slide-box .2s
    @keyframes move-slide-box
      0%
        right -360px
      100%
        right 0px

    .slide-box__header
      display flex
      flex-direction row
      justify-content space-between
      align-items center
      padding 13px 20px 13px
      box-sizing border-box
      border-bottom 1px solid #D9D9D9
      .slide-box__title
        font-size 14px
        font-family PingFangSC-Medium
        font-weight bold
      .slide-box__close
        cursor pointer
        font-size 16px
        font-weight bold
        :hover
          color #409EFF
    .slide-box__body
      flex 1
      padding 20px
      box-sizing border-box
      overflow-y auto
      overflow-x hidden
    .slide-box__footer
      background rgba(255,255,255,1)
      box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
      border-top 1px solid rgba(232,232,232,1)
      display flex
      justify-content center
      padding 10px 0 10px
      box-sizing border-box
      .slide-box__button
        padding 8px 20px 8px
        box-sizing border-box
</style>
